that is selected based on language type in between two other divs, i.e.
- *
- *
- *
- *
- *
- *
- *
- *
- *
- */
- :only-child {
- margin-bottom: -1px;
- margin-top: -21px;
- }
-
- div {
- display: contents;
- }
- dt {
- grid-column: 1;
- ${definitionListCell}
- }
- dd {
- ${definitionListCell}
- }
- dd > em:not(.italics):first-of-type {
- background: #e1e1e1;
- border-radius: 5px;
- padding: 2px 5px;
- display: block;
- width: fit-content;
- block-size: fit-content;
- margin-bottom: 7px;
- ::before {
- content: '(default: ';
- }
- ::after {
- content: ')';
- }
- }
- dd > em.italics:last-of-type {
- float: right;
- display: block;
- text-align: right;
- font-size: 12px;
- margin-top: 12px;
- }
-`;
+import { listDl } from '../list.module.css';
const Dl = ({ data, attribs }: HtmlComponentProps<'dl'>) => {
return (
-
+
-
+
);
};
diff --git a/src/components/blocks/list/Dt.tsx b/src/components/blocks/list/Dt.tsx
index 834c844327..db596c10e4 100644
--- a/src/components/blocks/list/Dt.tsx
+++ b/src/components/blocks/list/Dt.tsx
@@ -1,14 +1,8 @@
-import styled from 'styled-components';
import GenericHtmlBlock from '../Html/GenericHtmlBlock';
+import { listDt } from './list.module.css';
-const StyledDt = styled.dt`
- font-weight: 500;
- margin: 0 0 10px;
- @media (min-width: 40em) {
- min-width: 120px;
- }
-`;
+const Dt: React.FC<{ className?: string }> = (props) => (
+
+);
-const Dt = GenericHtmlBlock(StyledDt);
-
-export default Dt;
+export default GenericHtmlBlock(Dt);
diff --git a/src/components/blocks/list/Li.tsx b/src/components/blocks/list/Li.tsx
index 45fe0ed1ee..fb4a44250d 100644
--- a/src/components/blocks/list/Li.tsx
+++ b/src/components/blocks/list/Li.tsx
@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
import GenericHtmlBlock from '../Html/GenericHtmlBlock';
-const StyledLi: FC = ({ children, ...props }) => (
+const StyledLi: FC<{ children: React.ReactNode }> = ({ children, ...props }) => (
{children}
diff --git a/src/components/blocks/list/list.module.css b/src/components/blocks/list/list.module.css
new file mode 100644
index 0000000000..1c034885e3
--- /dev/null
+++ b/src/components/blocks/list/list.module.css
@@ -0,0 +1,116 @@
+/* Styles migrated to a CSS component to wean the repo off of styled-components
+All styles to be migrated to Tailwind classes when convenient */
+
+.list-dt {
+ font-weight: 500;
+ margin: 0 0 10px;
+ @media (min-width: 40em) {
+ min-width: 120px;
+ }
+}
+
+.list-dl {
+ border-top: 1px solid #e1e1e1;
+ display: grid;
+ grid-auto-rows: minmax(min-content, max-content);
+ grid-auto-flow: column;
+ margin-bottom: 20px;
+ font-size: 16px;
+ overflow-x: scroll;
+
+ /**
+ * This :only-child directive is present to ensure that multiple lines are not shown in the situation
+ * where there is a
inside a that is selected based on language type in between two other divs, i.e.
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ */
+ :only-child {
+ margin-bottom: -1px;
+ margin-top: -21px;
+ }
+
+ div {
+ display: contents;
+ }
+ dt,
+ dd {
+ border-bottom: 1px solid #e1e1e1;
+ height: 100%;
+ padding: 15px 20px 15px 0;
+ line-height: 1.5;
+ }
+ dt {
+ grid-column: 1;
+ }
+ dd > em:not(.italics):first-of-type {
+ background: #e1e1e1;
+ border-radius: 5px;
+ padding: 2px 5px;
+ display: block;
+ width: fit-content;
+ block-size: fit-content;
+ margin-bottom: 7px;
+ ::before {
+ content: '(default: ';
+ }
+ ::after {
+ content: ')';
+ }
+ }
+ dd > em.italics:last-of-type {
+ float: right;
+ display: block;
+ text-align: right;
+ font-size: 12px;
+ margin-top: 12px;
+ }
+}
+
+div.definition-list-row-styles {
+ display: block;
+ min-height: 35px;
+ border-bottom: 1px solid #e1e1e1;
+ overflow: auto;
+ padding: 15px 0;
+ @media (min-width: 40em) {
+ display: flex;
+ padding: 0;
+ width: 100%;
+ }
+}
+
+p.inline-content-container {
+ grid-row: 2;
+ grid-column: 1;
+ margin-left: var(--spacing-16);
+ padding-left: var(--spacing-16);
+ padding-right: var(--spacing-16);
+ padding-bottom: var(--spacing-16);
+ margin-bottom: var(--spacing-8);
+}
+
+div.inline-grid-paragraph {
+ display: inline-grid;
+ border-radius: 0.5em;
+ background-color: '#FAFAFB';
+ border-width: 1px;
+ border-color: #d9d9da;
+ grid-template-rows: auto auto;
+ margin-bottom: 24px;
+ font-size: 16px;
+ line-height: 23px;
+ padding: 0;
+ width: 100%;
+}
diff --git a/src/components/blocks/typography/P/Tip.tsx b/src/components/blocks/typography/P/Tip.tsx
index aed652d1c9..28582b6eac 100644
--- a/src/components/blocks/typography/P/Tip.tsx
+++ b/src/components/blocks/typography/P/Tip.tsx
@@ -1,71 +1,15 @@
-import React from 'react';
import { HtmlComponentProps } from '../../../html-component-props';
import Html from '../../Html';
-import styled from 'styled-components';
-import { colors } from '../../../../styles';
-
-/**
- * This is required because Tailwind v2 does not offer a good way to style one side of a border.
- * The closest to what design requires here is:
- * rounded-lg bg-{#FAFAFB} ring-2 ring-{#d9d9da} ring-inset border-l-8 border-{#08ff13} e p-4
- bg-{#08ff13} w-8 left-0 cursor-default
- */
-const LeftsideElement = styled.span`
- width: 8px;
- border-radius: 0.5em 0 0 0.5em;
- background-color: #08ff13;
- left: 0;
- cursor: default;
- grid-row-start: 1;
- grid-row-end: span 2;
- grid-column-start: 1;
- grid-column-end: 1;
- height: 100%;
-`;
-
-const TipTitleElement = styled.strong`
- margin-left: var(--spacing-16);
- padding: var(--spacing-16);
- margin-top: var(--spacing-8);
- grid-column-start: 1;
- grid-row-start: 1;
- text-transform: uppercase;
- font-size: 14px;
- letter-spacing: 0.1em;
- line-height: 18px;
-`;
-
-const InlineContentContainer = styled.p`
- grid-row: 2;
- grid-column: 1;
- margin-left: var(--spacing-16);
- padding-left: var(--spacing-16);
- padding-right: var(--spacing-16);
- padding-bottom: var(--spacing-16);
- margin-bottom: var(--spacing-8);
-`;
-
-const InlineGridParagraph = styled.div`
- display: inline-grid;
- border-radius: 0.5em;
- background-color: ${colors.containers.three};
- border-width: 1px;
- border-color: #d9d9da;
- grid-template-rows: auto auto;
- margin-bottom: 24px;
- font-size: 16px;
- line-height: 23px;
- padding: 0;
- width: 100%;
-`;
+import { inlineGridParagraph } from '../../list/list.module.css';
+import { leftSideElement, tipTitleElement, inlineContentContainer } from '../typography.module.css';
// This needs to be set to a grid in order to render properly
export const Tip = ({ data, attribs }: HtmlComponentProps<'p'>) => (
-
-
- Tip
-
+
);
diff --git a/src/components/blocks/typography/typography.module.css b/src/components/blocks/typography/typography.module.css
new file mode 100644
index 0000000000..919738db89
--- /dev/null
+++ b/src/components/blocks/typography/typography.module.css
@@ -0,0 +1,44 @@
+/* Styles migrated to a CSS component to wean the repo off of styled-components
+All styles to be migrated to Tailwind classes when convenient */
+
+/**
+ * This is required because Tailwind v2 does not offer a good way to style one side of a border.
+ * The closest to what design requires here is:
+ * rounded-lg bg-{#FAFAFB} ring-2 ring-{#d9d9da} ring-inset border-l-8 border-{#08ff13} e p-4
+ bg-{#08ff13} w-8 left-0 cursor-default
+ */
+span.left-side-element {
+ width: 8px;
+ border-radius: 0.5em 0 0 0.5em;
+ background-color: #08ff13;
+ left: 0;
+ cursor: default;
+ grid-row-start: 1;
+ grid-row-end: span 2;
+ grid-column-start: 1;
+ grid-column-end: 1;
+ height: 100%;
+}
+
+strong.tip-title-element {
+ margin-left: var(--spacing-16);
+ margin-top: var(--spacing-8);
+ padding: var(--spacing-16);
+ grid-column-start: 1;
+ grid-row-start: 1;
+ text-transform: uppercase;
+ font-size: 14px;
+ letter-spacing: 0.1em;
+ line-height: 18px;
+}
+
+p.inline-content-container {
+ grid-row: 2;
+ grid-column: 1;
+ margin-left: var(--spacing-16);
+ padding-left: var(--spacing-16);
+ padding-right: var(--spacing-16);
+ padding-bottom: var(--spacing-16);
+ margin-bottom: var(--spacing-8);
+ display: inline;
+}
diff --git a/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap b/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap
index 1d971f62fe..aafeadcb13 100644
--- a/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap
+++ b/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap
@@ -2,7 +2,7 @@
exports[`Integration: ConditionalChildrenLanguageDisplay only displays one - pair of children from alternatives for parsed definition lists ConditionalChildrenLanguageDisplay displays the expected results from HTML data 1`] = `
@@ -10,14 +10,14 @@ exports[`Integration: ConditionalChildrenLanguageDisplay only displays one - <
lang="javascript"
>
-
callback
-
is a function of the form
({
...ablyUIConfig,
purge: {
@@ -130,6 +135,7 @@ module.exports = extendConfig((ablyUIConfig) => ({
colors: {
...apiReferenceSpecificColors,
...highlightColors,
+ ...legacyBrandColors,
},
gridRowStart: {
9: '9',