Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: updated Elevation and Responsive docs #3335

Merged
merged 1 commit into from
Feb 9, 2025
Merged

docs: updated Elevation and Responsive docs #3335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions www/src/pages/foundations/elevation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,14 +395,14 @@ export default function ElevationPage({ pageContext }) {
<h4>Example variables usage</h4>
<p>Variables are available with following pattern: </p>
<code className="d-block mb-2 bg-gray-100 p-3">
{'$box-shadow-{direction}-{level}'}
{'var(--pgn-elevation-box-shadow-{direction}-{level})'}
</code>
<p>For example:</p>
<code className="d-block mb-2 bg-gray-100 p-3">
$box-shadow-right-2
var(--pgn-elevation-box-shadow-right-2)
</code>
<code className="d-block mb-2 bg-gray-100 p-3">
$box-shadow-up-3
var(--pgn-elevation-box-shadow-up-3)
</code>
<br />

Expand Down
86 changes: 85 additions & 1 deletion www/src/pages/foundations/responsive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,34 @@ const BREAKPOINT_DESCRIPTIONS = {
extraExtraLarge: { name: 'Extra extra large', identifier: 'xxl' },
};

const customBreakpoints = [
{ name: '--pgn-size-breakpoint-min-width-xs', property: 'min-width', value: '0px' },
{ name: '--pgn-size-breakpoint-max-width-xs', property: 'max-width', value: '576px' },
{ name: '--pgn-size-breakpoint-min-width-sm', property: 'min-width', value: '576px' },
{ name: '--pgn-size-breakpoint-max-width-sm', property: 'max-width', value: '768px' },
{ name: '--pgn-size-breakpoint-min-width-md', property: 'min-width', value: '768px' },
{ name: '--pgn-size-breakpoint-max-width-md', property: 'max-width', value: '992px' },
{ name: '--pgn-size-breakpoint-min-width-lg', property: 'min-width', value: '992px' },
{ name: '--pgn-size-breakpoint-max-width-lg', property: 'max-width', value: '1200px' },
{ name: '--pgn-size-breakpoint-min-width-xl', property: 'min-width', value: '1200px' },
{ name: '--pgn-size-breakpoint-max-width-xl', property: 'max-width', value: '1400px' },
{ name: '--pgn-size-breakpoint-min-width-xxl', property: 'min-width', value: '1400px' },
];

const getBreakpointDescription = (breakpoint) => BREAKPOINT_DESCRIPTIONS[breakpoint] || {};

function IdentifierCell({ row }) {
return <code>{row.values.identifier}</code>;
}

function PropertyCell({ row }) {
return <code>{row.values.property}</code>;
}

function ValueCell({ row }) {
return <code>{row.values.value}</code>;
}

function MinWidthCell({ row }) {
if (row.values.identifier === 'xs') {
return (
Expand All @@ -45,6 +68,7 @@ function MinWidthCell({ row }) {
}
return <code>{row.values.minWidth ? `${row.values.minWidth}px` : '-'}</code>;
}

function MaxWidthCell({ row }) {
return <code>{row.values.maxWidth ? `${row.values.maxWidth}px` : '-'}</code>;
}
Expand Down Expand Up @@ -83,7 +107,8 @@ function Responsive({ pageContext }) {
>
<DataTable.Table />
</DataTable>
<h2 className="mt-3">Basic usage</h2>
<h2 className="mt-3">SCSS variables</h2>
<h3 className="mt-3">Basic usage</h3>
<p>
To access or change the breakpoints in the scss use <code>$grid-breakpoints</code> variable.
</p>
Expand All @@ -99,6 +124,57 @@ function Responsive({ pageContext }) {
<CodeBlock className="language-scss">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On this page I am not sure if it is worth deleting information that relates to SCSS variables. Any thoughts?

{'@include media-breakpoint-up(map.get($grid-breakpoints, \'lg\')) { // styles here }'}
</CodeBlock>

<h2 className="mt-3">CSS Custom Media Breakpoints</h2>
<p>
Media breakpoints in CSS are defined using the following variables.
</p>
<h3>Available Breakpoints</h3>
<DataTable
className="pgn-doc__spacing-table"
data={customBreakpoints}
columns={[
{ Header: 'Breakpoint', accessor: 'name' },
{ Header: 'Property', accessor: 'property', Cell: PropertyCell },
{ Header: 'Value', accessor: 'value', Cell: ValueCell },
]}
itemCount={0}
>
<DataTable.Table />
</DataTable>

<h3 className="mt-3">Basic Usage</h3>
<p>
The structure of a breakpoint variable is:
</p>
<CodeBlock className="language-scss">
{'--pgn-size-breakpoint-{width_type}-{class_infix}'}
</CodeBlock>
<p>
Explanation of the variable components:
<ul>
<li><code>{'{width_type}'}</code> specifies the width type, either <strong>min</strong> for a minimum width
(inclusive) or <strong>max</strong> for a maximum width (inclusive).
</li>
<li><code>{'{class_infix}'}</code> refers to the breakpoint name, such as <code>sm</code>, <code>md</code>,
or <code>lg</code>.
</li>
</ul>
</p>

<p>
Example for applying styles when the screen width is narrower than the <code>md</code> breakpoint:
</p>
<CodeBlock className="language-scss">
{'@media (--pgn-size-breakpoint-max-width-md) { // styles here }'}
</CodeBlock>

<p>
For applying styles when the screen width is wider than the <code>md</code> breakpoint:
</p>
<CodeBlock className="language-scss">
{'@media (--pgn-size-breakpoint-min-width-md) { // styles here }'}
</CodeBlock>
</Container>
</Layout>
);
Expand All @@ -116,6 +192,8 @@ const cellPropTypes = {
identifier: PropTypes.string,
minWidth: PropTypes.number,
maxWidth: PropTypes.number,
property: PropTypes.string,
value: PropTypes.string,
}),
}),
};
Expand All @@ -132,4 +210,10 @@ IdentifierCell.defaultProps = cellDefaultProps;
MinWidthCell.defaultProps = cellDefaultProps;
MaxWidthCell.defaultProps = cellDefaultProps;

PropertyCell.propTypes = cellPropTypes;
ValueCell.propTypes = cellPropTypes;

PropertyCell.defaultProps = cellDefaultProps;
ValueCell.defaultProps = cellDefaultProps;

export default Responsive;