Skip to content

Commit 9531430

Browse files
VictoriaIleanaRodriguezMoraVictoriaIleanaRodriguezMora
committed
Merge branch 'feat_skeleton' of https://github.com/gcba/Obelisco-V2 into feat_skeleton
2 parents 86ec616 + ebd90a2 commit 9531430

3 files changed

Lines changed: 497 additions & 4 deletions

File tree

‎app/src/documents/Card/CardDocs.tsx‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ import {
2424
VERTICAL_IMG,
2525
VERTICAL_NOTICE,
2626
VERTICAL_NOTICE_TRUNCATE,
27+
SKELETON_HORIZONTAL_ICON,
28+
SKELETON_HORIZONTAL_TEXT,
29+
SKELETON_HORIZONTAL_THEME,
30+
SKELETON_VERTICAL_ICON,
31+
SKELETON_VERTICAL_IMG,
32+
SKELETON_VERTICAL_NOTICE,
33+
SKELETON_VERTICAL_AGENDA,
2734
} from './code-views';
2835

2936
const basePath = '/Obelisco-V2';
@@ -1723,6 +1730,272 @@ const CardDocs: React.FC = () => {
17231730
},
17241731
];
17251732

1733+
const SKELETON = [
1734+
{
1735+
title: 'Horizontal',
1736+
firstTitle: true,
1737+
},
1738+
{
1739+
subtitle: 'Con icono / imagen',
1740+
content: (
1741+
<CodeBox codeHTML={SKELETON_HORIZONTAL_ICON}>
1742+
<div className="container">
1743+
<div className="card-box-sizing">
1744+
<div className="card card-horizontal ob-skeleton" aria-hidden="true">
1745+
<span className="ob-placeholder rounded-3 m-3 me-0" style={{ width: '64px', height: '64px' }}></span>
1746+
<div className="card-body">
1747+
<h3 className="card-title">
1748+
<span className="ob-placeholder w-50"></span>
1749+
</h3>
1750+
<span className="ob-placeholder mt-2 w-75"></span>
1751+
</div>
1752+
</div>
1753+
<br />
1754+
<div className="card card-horizontal ob-skeleton" aria-hidden="true">
1755+
<div className="d-flex w-100 card-border-left-blue">
1756+
<span className="ob-placeholder rounded-3 m-3 me-0" style={{ width: '64px', height: '64px' }}></span>
1757+
<div className="card-body">
1758+
<h3 className="card-title">
1759+
<span className="ob-placeholder w-50"></span>
1760+
</h3>
1761+
<span className="ob-placeholder mt-2 w-75"></span>
1762+
</div>
1763+
</div>
1764+
</div>
1765+
<br />
1766+
<div className="card card-horizontal unbordered ob-skeleton" aria-hidden="true">
1767+
<span className="ob-placeholder rounded-3 m-3 me-0" style={{ width: '64px', height: '64px' }}></span>
1768+
<div className="card-body">
1769+
<h3 className="card-title">
1770+
<span className="ob-placeholder w-50"></span>
1771+
</h3>
1772+
<span className="ob-placeholder mt-2 w-75"></span>
1773+
</div>
1774+
</div>
1775+
</div>
1776+
</div>
1777+
</CodeBox>
1778+
),
1779+
},
1780+
{
1781+
subtitle: 'Solo texto',
1782+
content: (
1783+
<CodeBox codeHTML={SKELETON_HORIZONTAL_TEXT}>
1784+
<div className="container">
1785+
<div className="col-12 col-xl-8">
1786+
<div className="card card-horizontal ob-skeleton" aria-hidden="true">
1787+
<div className="card-body">
1788+
<h3 className="card-title">
1789+
<span className="ob-placeholder w-50"></span>
1790+
</h3>
1791+
<span className="ob-placeholder mt-2 w-75"></span>
1792+
</div>
1793+
</div>
1794+
<br />
1795+
<div className="card card-horizontal ob-skeleton" aria-hidden="true">
1796+
<div className="card-body card-border-left-blue">
1797+
<h3 className="card-title">
1798+
<span className="ob-placeholder w-50"></span>
1799+
</h3>
1800+
<span className="ob-placeholder mt-2 w-75"></span>
1801+
</div>
1802+
</div>
1803+
<br />
1804+
<div className="card card-horizontal unbordered ob-skeleton" aria-hidden="true">
1805+
<div className="card-body">
1806+
<h3 className="card-title">
1807+
<span className="ob-placeholder w-50"></span>
1808+
</h3>
1809+
<span className="ob-placeholder mt-2 w-75"></span>
1810+
</div>
1811+
</div>
1812+
</div>
1813+
</div>
1814+
</CodeBox>
1815+
),
1816+
},
1817+
{
1818+
subtitle: 'Temática',
1819+
content: (
1820+
<CodeBox codeHTML={SKELETON_HORIZONTAL_THEME}>
1821+
<div className="container">
1822+
<div className="card-box-sizing">
1823+
<div className="card thematic ob-skeleton" aria-hidden="true">
1824+
<span className="ob-placeholder" style={{ width: '128px', height: '128px' }}></span>
1825+
<div className="card-body">
1826+
<h3 className="card-title">
1827+
<span className="ob-placeholder w-50"></span>
1828+
</h3>
1829+
<span className="ob-placeholder mt-2 w-75"></span>
1830+
</div>
1831+
</div>
1832+
</div>
1833+
</div>
1834+
</CodeBox>
1835+
),
1836+
},
1837+
{
1838+
title: 'Vertical',
1839+
},
1840+
{
1841+
subtitle: 'Con icono',
1842+
content: (
1843+
<CodeBox codeHTML={SKELETON_VERTICAL_ICON}>
1844+
<div className="container">
1845+
<div className="card-vertical-box-sizing">
1846+
<div className="card ob-skeleton" aria-hidden="true">
1847+
<span className="ob-placeholder rounded-3 m-4 mb-0" style={{ width: '64px', height: '64px' }}></span>
1848+
<div className="card-body">
1849+
<h3 className="card-title">
1850+
<span className="ob-placeholder w-50"></span>
1851+
</h3>
1852+
<span className="ob-placeholder mt-2 w-75"></span>
1853+
</div>
1854+
</div>
1855+
<br />
1856+
<div className="card ob-skeleton" aria-hidden="true">
1857+
<span className="ob-placeholder rounded-3 m-4 mb-0" style={{ width: '64px', height: '64px' }}></span>
1858+
<div className="card-body card-border-bottom-blue">
1859+
<h3 className="card-title">
1860+
<span className="ob-placeholder w-50"></span>
1861+
</h3>
1862+
<span className="ob-placeholder mt-2 w-75"></span>
1863+
</div>
1864+
</div>
1865+
<br />
1866+
<div className="card unbordered ob-skeleton" aria-hidden="true">
1867+
<span className="ob-placeholder rounded-3 m-4 mb-0" style={{ width: '64px', height: '64px' }}></span>
1868+
<div className="card-body">
1869+
<h3 className="card-title">
1870+
<span className="ob-placeholder w-50"></span>
1871+
</h3>
1872+
<span className="ob-placeholder mt-2 w-75"></span>
1873+
</div>
1874+
</div>
1875+
</div>
1876+
</div>
1877+
</CodeBox>
1878+
),
1879+
},
1880+
{
1881+
subtitle: 'Con imagen',
1882+
content: (
1883+
<CodeBox codeHTML={SKELETON_VERTICAL_IMG}>
1884+
<div className="container">
1885+
<div className="card-vertical-box-sizing">
1886+
<div className="card ob-skeleton" aria-hidden="true">
1887+
<span className="ob-placeholder w-100" style={{ height: '196px' }}></span>
1888+
<div className="card-body">
1889+
<h3 className="card-title">
1890+
<span className="ob-placeholder w-50"></span>
1891+
</h3>
1892+
<span className="ob-placeholder mt-2 w-75"></span>
1893+
</div>
1894+
</div>
1895+
<br />
1896+
<div className="card ob-skeleton" aria-hidden="true">
1897+
<span className="ob-placeholder w-100" style={{ height: '196px' }}></span>
1898+
<div className="card-body card-border-bottom-blue">
1899+
<h3 className="card-title">
1900+
<span className="ob-placeholder w-50"></span>
1901+
</h3>
1902+
<span className="ob-placeholder mt-2 w-75"></span>
1903+
</div>
1904+
</div>
1905+
</div>
1906+
</div>
1907+
</CodeBox>
1908+
),
1909+
},
1910+
{
1911+
subtitle: 'Noticia',
1912+
content: (
1913+
<CodeBox codeHTML={SKELETON_VERTICAL_NOTICE}>
1914+
<div className="container">
1915+
<div className="card-vertical-box-sizing">
1916+
<div className="card ob-skeleton" aria-hidden="true">
1917+
<span className="ob-placeholder w-100" style={{ height: '196px' }}></span>
1918+
<div className="card-body">
1919+
<div className="card-badges">
1920+
<span className="ob-placeholder w-25 rounded-2 me-2" style={{ height: '24px' }}></span>
1921+
<span className="ob-placeholder w-25 rounded-2" style={{ height: '24px' }}></span>
1922+
</div>
1923+
<h3 className="card-title">
1924+
<span className="ob-placeholder w-50"></span>
1925+
</h3>
1926+
<span className="ob-placeholder mt-2 w-75"></span>
1927+
<div className="card-info">
1928+
<div>
1929+
<small>
1930+
<span className="ob-placeholder mt-2 w-50"></span>
1931+
</small>
1932+
</div>
1933+
</div>
1934+
</div>
1935+
</div>
1936+
</div>
1937+
</div>
1938+
</CodeBox>
1939+
),
1940+
},
1941+
{
1942+
subtitle: 'Eventos',
1943+
content: (
1944+
<CodeBox codeHTML={SKELETON_VERTICAL_AGENDA}>
1945+
<div className="container">
1946+
<div className="card-vertical-box-sizing">
1947+
<div className="card card-eventos ob-skeleton" aria-hidden="true">
1948+
<span className="ob-placeholder w-100" style={{ height: '196px' }}></span>
1949+
<div className="card-body">
1950+
<span className="ob-placeholder w-50 mb-3"></span>
1951+
<div className="mb-3">
1952+
<span className="ob-placeholder w-25 rounded-2 me-2" style={{ height: '24px' }}></span>
1953+
<span className="ob-placeholder w-25 rounded-2" style={{ height: '24px' }}></span>
1954+
</div>
1955+
<h3 className="card-title">
1956+
<span className="ob-placeholder col-1 me-1"></span>
1957+
<span className="ob-placeholder col-2 me-1"></span>
1958+
<span className="ob-placeholder col-4 me-1"></span>
1959+
<span className="ob-placeholder col-3 me-1"></span>
1960+
<span className="ob-placeholder col-4 me-1"></span>
1961+
<span className="ob-placeholder col-6"></span>
1962+
</h3>
1963+
<div className="mt-3 d-flex flex-wrap gap-1">
1964+
<span className="ob-placeholder col-1"></span>
1965+
<span className="ob-placeholder col-3"></span>
1966+
<span className="ob-placeholder col-2"></span>
1967+
<span className="ob-placeholder col-4"></span>
1968+
<span className="ob-placeholder col-6"></span>
1969+
<span className="ob-placeholder col-1"></span>
1970+
<span className="ob-placeholder col-3"></span>
1971+
<span className="ob-placeholder col-6"></span>
1972+
<span className="ob-placeholder col-4"></span>
1973+
<span className="ob-placeholder col-2"></span>
1974+
<span className="ob-placeholder col-6"></span>
1975+
<span className="ob-placeholder col-3"></span>
1976+
</div>
1977+
<div className="card-info">
1978+
<div className="pt-2">
1979+
<small>
1980+
<span className="ob-placeholder mt-2 w-25"></span>
1981+
</small>
1982+
<small>
1983+
<span className="ob-placeholder mt-2 w-25"></span>
1984+
</small>
1985+
<small>
1986+
<span className="ob-placeholder mt-2 w-50"></span>
1987+
</small>
1988+
</div>
1989+
</div>
1990+
</div>
1991+
</div>
1992+
</div>
1993+
</div>
1994+
</CodeBox>
1995+
),
1996+
},
1997+
];
1998+
17261999
return (
17272000
<>
17282001
<ComponentHeader
@@ -1745,6 +2018,11 @@ const CardDocs: React.FC = () => {
17452018
id: 'section-accessibility',
17462019
sectionContent: ACCESSIBILITY,
17472020
},
2021+
{
2022+
title: 'Skeleton',
2023+
id: 'section-skeleton',
2024+
sectionContent: SKELETON,
2025+
},
17482026
]}
17492027
/>
17502028
</>

0 commit comments

Comments
 (0)