diff --git a/aries-site/package.json b/aries-site/package.json index aa7eca978..8f116d028 100644 --- a/aries-site/package.json +++ b/aries-site/package.json @@ -6,10 +6,10 @@ "main": "src/pages/index.js", "private": true, "dependencies": { - "aries-core": "*", "@mdx-js/loader": "^2.3.0", "@mdx-js/react": "^2.3.0", "@next/mdx": "^13.4.4", + "aries-core": "*", "next": "13.4.4", "react-ga": "^2.7.0", "react-syntax-highlighter": "^15.4.4", diff --git a/aries-site/public/fonts/metric-2-black-italic.woff2 b/aries-site/public/fonts/metric-2-black-italic.woff2 new file mode 100644 index 000000000..7918840d9 Binary files /dev/null and b/aries-site/public/fonts/metric-2-black-italic.woff2 differ diff --git a/aries-site/public/fonts/metric-2-black.woff2 b/aries-site/public/fonts/metric-2-black.woff2 new file mode 100644 index 000000000..b3230e5b3 Binary files /dev/null and b/aries-site/public/fonts/metric-2-black.woff2 differ diff --git a/aries-site/public/fonts/metric-2-bold-italic.woff2 b/aries-site/public/fonts/metric-2-bold-italic.woff2 new file mode 100644 index 000000000..abe0afe16 Binary files /dev/null and b/aries-site/public/fonts/metric-2-bold-italic.woff2 differ diff --git a/aries-site/public/fonts/metric-2-bold.woff2 b/aries-site/public/fonts/metric-2-bold.woff2 new file mode 100644 index 000000000..2db2c936c Binary files /dev/null and b/aries-site/public/fonts/metric-2-bold.woff2 differ diff --git a/aries-site/public/fonts/metric-2-heavy-italic.woff2 b/aries-site/public/fonts/metric-2-heavy-italic.woff2 new file mode 100644 index 000000000..7a42a9fa9 Binary files /dev/null and b/aries-site/public/fonts/metric-2-heavy-italic.woff2 differ diff --git a/aries-site/public/fonts/metric-2-heavy.woff2 b/aries-site/public/fonts/metric-2-heavy.woff2 new file mode 100644 index 000000000..e8d60725a Binary files /dev/null and b/aries-site/public/fonts/metric-2-heavy.woff2 differ diff --git a/aries-site/public/fonts/metric-2-italic.woff2 b/aries-site/public/fonts/metric-2-italic.woff2 new file mode 100644 index 000000000..0b1907346 Binary files /dev/null and b/aries-site/public/fonts/metric-2-italic.woff2 differ diff --git a/aries-site/public/fonts/metric-2-light-italic.woff2 b/aries-site/public/fonts/metric-2-light-italic.woff2 new file mode 100644 index 000000000..7ac12bca0 Binary files /dev/null and b/aries-site/public/fonts/metric-2-light-italic.woff2 differ diff --git a/aries-site/public/fonts/metric-2-light.woff2 b/aries-site/public/fonts/metric-2-light.woff2 new file mode 100644 index 000000000..06c0906c5 Binary files /dev/null and b/aries-site/public/fonts/metric-2-light.woff2 differ diff --git a/aries-site/public/fonts/metric-2-medium-italic.woff2 b/aries-site/public/fonts/metric-2-medium-italic.woff2 new file mode 100644 index 000000000..6843b4f76 Binary files /dev/null and b/aries-site/public/fonts/metric-2-medium-italic.woff2 differ diff --git a/aries-site/public/fonts/metric-2-medium.woff2 b/aries-site/public/fonts/metric-2-medium.woff2 new file mode 100644 index 000000000..9a4f7620a Binary files /dev/null and b/aries-site/public/fonts/metric-2-medium.woff2 differ diff --git a/aries-site/public/fonts/metric-2-regular.woff2 b/aries-site/public/fonts/metric-2-regular.woff2 new file mode 100644 index 000000000..f88644ec3 Binary files /dev/null and b/aries-site/public/fonts/metric-2-regular.woff2 differ diff --git a/aries-site/public/fonts/metric-2-thin-italic.woff2 b/aries-site/public/fonts/metric-2-thin-italic.woff2 new file mode 100644 index 000000000..807145db8 Binary files /dev/null and b/aries-site/public/fonts/metric-2-thin-italic.woff2 differ diff --git a/aries-site/public/fonts/metric-2-thin.woff2 b/aries-site/public/fonts/metric-2-thin.woff2 new file mode 100644 index 000000000..92e790a26 Binary files /dev/null and b/aries-site/public/fonts/metric-2-thin.woff2 differ diff --git a/aries-site/src/components/seo/Meta.js b/aries-site/src/components/seo/Meta.js index ee02962c9..12dfa08eb 100644 --- a/aries-site/src/components/seo/Meta.js +++ b/aries-site/src/components/seo/Meta.js @@ -26,7 +26,7 @@ export const Meta = ({ // in dev mode, we allow unsafe-eval to work with react hot reloader process.env.NODE_ENV !== 'production' ? "'unsafe-eval'" : '' }; - font-src *.hpe.com hpefonts.s3.amazonaws.com https://d3hq6blov2iije.cloudfront.net/fonts/; + font-src 'self' *.hpe.com hpefonts.s3.amazonaws.com https://d3hq6blov2iije.cloudfront.net/fonts/; object-src 'none';`; /* diff --git a/aries-site/src/pages/_app.js b/aries-site/src/pages/_app.js index 7d609ee52..4db375463 100644 --- a/aries-site/src/pages/_app.js +++ b/aries-site/src/pages/_app.js @@ -1,9 +1,33 @@ import { MDXProvider } from '@mdx-js/react'; import PropTypes from 'prop-types'; import React, { useEffect } from 'react'; +import localFont from 'next/font/local'; import { Layout, ThemeMode } from '../layouts'; import { components } from '../components'; +const metric = localFont({ + src: [ + { + path: '../../public/fonts/metric-2-regular.woff2', + weight: '400', + }, + { + path: '../../public/fonts/metric-2-medium.woff2', + weight: '500', + }, + { + path: '../../public/fonts/metric-2-light.woff2', + weight: '300', + }, + { + path: '../../public/fonts/metric-2-bold.woff2', + weight: '700', + }, + ], + // src: '../../public/fonts/metric-2-regular.woff2', + variable: '--font-metric', +}); + const slugToText = str => str.split('-').join(' '); const backgroundImages = { @@ -91,18 +115,20 @@ function App({ Component, pageProps, router }) { return ( - - - - - +
+ + + + + +
); } diff --git a/aries-site/src/pages/sticker-sheet.js b/aries-site/src/pages/sticker-sheet.js new file mode 100644 index 000000000..a9be7999c --- /dev/null +++ b/aries-site/src/pages/sticker-sheet.js @@ -0,0 +1,356 @@ +/* eslint-disable grommet/button-icon-a11ytitle */ +/* eslint-disable grommet/spinner-message */ +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; +import { + Anchor, + Box, + Button, + Menu, + Page, + Heading, + PageContent, + PageHeader, + Text, + Stack, + ThemeContext, + Paragraph, + Accordion, + AccordionPanel, + DateInput, + Pagination, + Spinner, + Tag, + Select, + FormField, +} from 'grommet'; +import { hpe as hpeCurrent } from 'grommet-theme-hpe'; +import { deepMerge } from 'grommet/utils'; +import { User } from 'grommet-icons'; +import { Meta } from '../components'; +import { aries } from '../themes/aries'; +import { + BannerNotificationInfo, + CheckBoxGroupSimpleExample, + CheckBoxSimpleExample, + MaskedPhoneExample, + NameValueListSimpleExample, + RadioButtonGroupExample, + RangeInputExample, + SearchExample, + SelectExample, + SelectMultipleSimpleExample, + TabsExample, + TextAreaExample, + TextInputExample, +} from '../examples'; + +export const current = deepMerge(hpeCurrent, { + global: { + font: { + family: 'Metric', + }, + }, + button: { + extend: props => + `${hpeCurrent.button.extend(props)} font-family: 'Metric';`, + }, + paragraph: { + extend: props => + `${hpeCurrent.paragraph.extend(props)} font-family: 'Metric';`, + }, + text: { + extend: props => `${hpeCurrent.text.extend(props)} font-family: 'Metric';`, + }, +}); +const title = 'Sticker Sheet'; + +const textSizes = [ + 'xsmall', + 'small', + 'medium', + 'large', + 'xlarge', + 'xxlarge', + '3xl', + '4xl', + '5xl', + '6xl', +]; + +const kinds = ['default', 'toolbar', 'secondary', 'primary']; +const states = ['enabled', 'active', 'disabled']; +const sizes = ['small', 'medium', 'large', 'xlarge']; + +const ModeContext = React.createContext({}); + +const Compare = ({ children, ...rest }) => { + const { mode } = React.useContext(ModeContext); + return ( + + + + {children} + + + + + {children} + + + ); +}; + +Compare.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array, + PropTypes.element, + ]), +}; + +const StickerSheet = () => { + const [mode, setMode] = React.useState('Compare diffs'); + + const contextValue = useMemo(() => { + return { + mode, + }; + }, [mode]); + return ( + + + + + + +