Skip to content

Commit

Permalink
feat(block-title): new medium and large props for new sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 16, 2022
1 parent 1bebcd5 commit bc6b470
Show file tree
Hide file tree
Showing 8 changed files with 49 additions and 10 deletions.
4 changes: 2 additions & 2 deletions kitchen-sink/react/pages/ContentBlock.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ export default function ContentBlockPage() {
</p>
</Block>
<BlockFooter>Footer</BlockFooter>
<BlockTitle className="text-2xl">Medium Title</BlockTitle>
<BlockTitle medium>Medium Title</BlockTitle>
<Block strong>
<p>
Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
mollis, vulputate turpis vel, sagittis felis.
</p>
</Block>
<BlockTitle className="text-3xl">Large Title</BlockTitle>
<BlockTitle large>Large Title</BlockTitle>
<Block strong>
<p>
Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Expand Down
4 changes: 2 additions & 2 deletions kitchen-sink/svelte/pages/ContentBlock.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@
</p>
</Block>
<BlockFooter>Footer</BlockFooter>
<BlockTitle class="text-2xl">Medium Title</BlockTitle>
<BlockTitle medium>Medium Title</BlockTitle>
<Block strong>
<p>
Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
mollis, vulputate turpis vel, sagittis felis.
</p>
</Block>
<BlockTitle class="text-3xl">Large Title</BlockTitle>
<BlockTitle large>Large Title</BlockTitle>
<Block strong>
<p>
Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Expand Down
4 changes: 2 additions & 2 deletions kitchen-sink/vue/pages/ContentBlock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@
</p>
</k-block>
<k-block-footer>Footer</k-block-footer>
<k-block-title class="text-2xl">Medium Title</k-block-title>
<k-block-title medium>Medium Title</k-block-title>
<k-block strong>
<p>
Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
mollis, vulputate turpis vel, sagittis felis.
</p>
</k-block>
<k-block-title class="text-3xl">Large Title</k-block-title>
<k-block-title large>Large Title</k-block-title>
<k-block strong>
<p>
Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Expand Down
3 changes: 3 additions & 0 deletions src/react/components/BlockTitle.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const BlockTitle = forwardRef((props, ref) => {

withBlock = true,

medium,
large,

ios,
material,

Expand Down
18 changes: 15 additions & 3 deletions src/shared/classes/BlockTitleClasses.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
import { cls } from '../cls.js';

export const BlockTitleClasses = (props, colors) => {
const { withBlock } = props;
const { withBlock, medium, large } = props;
return {
base: {
common: `pl-4-safe pr-4-safe mt-8 flex justify-between items-center ${
withBlock ? '-mb-6' : 'mb-2'
}`,
ios: `font-semibold ${colors.textIos}`,
material: `text-sm font-medium ${colors.textMaterial}`,
ios: cls(
`font-semibold ${colors.textIos}`,
large && 'text-[1.5rem]',
medium && 'text-[1.125rem]',
!medium && !large && 'text-[1rem]'
),
material: cls(
`font-medium ${colors.textMaterial}`,
large && 'text-[1.375rem]',
medium && 'text-[1rem]',
!medium && !large && 'text-[0.875rem]'
),
},
};
};
4 changes: 3 additions & 1 deletion src/svelte/components/BlockTitle.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@
export let material = undefined;
export let withBlock = true;
export let medium = false;
export let large = false;
const dark = useDarkClasses();
$: colors = BlockTitleColors(colorsProp, dark);
$: c = useThemeClasses(
{ ios, material },
BlockTitleClasses({ withBlock }, colors),
BlockTitleClasses({ withBlock, medium, large }, colors),
className,
(v) => (c = v)
);
Expand Down
14 changes: 14 additions & 0 deletions src/types/BlockTitle.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,18 @@ interface Props {
* @default true
*/
withBlock?: boolean;

/**
* Medium sized block title
*
* @default false
*/
medium?: boolean;

/**
* Large sized block title
*
* @default false
*/
large?: boolean;
}
8 changes: 8 additions & 0 deletions src/vue/components/BlockTitle.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@
type: Boolean,
default: true,
},
medium: {
type: Boolean,
default: false,
},
large: {
type: Boolean,
default: false,
},
},
setup(props) {
const colors = computed(() =>
Expand Down

0 comments on commit bc6b470

Please sign in to comment.